<!-- 需求单详情 -->
<template>
  <el-dialog
    title="详情"
    :visible.sync="dialogVisible"
    append-to-body
    width="60%"
    @close="dialogClose"
  >
    <el-tabs v-model="activeName" v-loading="loading">
      <el-tab-pane label="运单信息" name="first">
        <!-- <el-descriptions>
          <el-descriptions-item label="货运订单">{{detail.orderNo}}</el-descriptions-item>
          <el-descriptions-item label="货运订单类型">{{detail.orderType}}</el-descriptions-item>
          <el-descriptions-item label="交货单">{{detail.deliverNo}}</el-descriptions-item>
          <el-descriptions-item label="源位置">{{detail.startLocationNo}}</el-descriptions-item>
          <el-descriptions-item label="源位置名称">{{detail.startLocationName}}</el-descriptions-item>
          <el-descriptions-item label="源位置区域（省份）">{{detail.startLocationArea}}</el-descriptions-item>
          <el-descriptions-item label="源位置城市">{{detail.startLocationCity}}</el-descriptions-item>
          <el-descriptions-item label="源位置街道">{{detail.startLocationStreet}}</el-descriptions-item>
          <el-descriptions-item label="目标位置">{{detail.targetLocationNo}}</el-descriptions-item>
          <el-descriptions-item label="目标位置名称">{{detail.targetLocationName}}</el-descriptions-item>
          <el-descriptions-item label="目标位置区域（省份）">{{detail.targetLocationArea}}</el-descriptions-item>
          <el-descriptions-item label="目标位置城市">{{detail.targetLocationCity}}</el-descriptions-item>
          <el-descriptions-item label="目标位置街道">{{detail.targetLocationStreet}}</el-descriptions-item>
          <el-descriptions-item label="承运商ID">{{detail.carrierNo}}</el-descriptions-item>
          <el-descriptions-item label="承运商名称">{{detail.carrierName}}</el-descriptions-item>
          <el-descriptions-item label="计划提货日期">{{detail.planGetGoodsDateStart}}</el-descriptions-item>
          <el-descriptions-item label="备注">{{detail.remark}}</el-descriptions-item>
          <el-descriptions-item label="计划收货日期">{{detail.planGetGoodsDateEnd}}</el-descriptions-item>
        </el-descriptions> -->
        <avue-form ref="form" v-model="detail" :option="formOption"></avue-form>
      </el-tab-pane>
      <el-tab-pane label="物料信息" name="second">
        <avue-crud
          :data="demandOrderItemList"
          :option="materialOption"
        ></avue-crud>
      </el-tab-pane>
      <el-tab-pane
        label="异常信息"
        name="third"
        v-if="specialTransport.indexOf(detail.orderType) !== -1"
      >
        <avue-crud :data="exceptionRecord" :option="exceptionOption">
          <template
            slot="exceptionPic"
            slot-scope="{ row }"
            v-if="row.exceptionPic"
          >
            <el-image
              style="height: 50px; width: 50px; margin-right: 10px"
              :src="src"
              v-for="(src, index) in row.exceptionPic.split(';')"
              :key="index"
              :preview-src-list="row.exceptionPic.split(';')"
              z-index="2004"
            >
            </el-image>
          </template>
          <template slot-scope="{ row }" slot="menu">
            <el-button
              type="text"
              size="mini"
              icon="el-icon-edit"
              @click.stop="abnormalCost(row)"
              >异常费用</el-button
            >
          </template>
        </avue-crud>
      </el-tab-pane>
    </el-tabs>
    <span slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">关 闭</el-button>
    </span>
    <!-- 异常费用弹窗 -->
    <abnormalCostList ref="abnormalCostList" @refresh="open(id)" />
  </el-dialog>
</template>
<script>
import { getDetail } from "@/api/transportation/demandorder";
import abnormalCostList from "./abnormalCostList";
export default {
  data() {
    return {
      dialogVisible: false,
      specialTransport: ["ZFO3", "ZFO9", "ZFB1", "ZFB2"],
      activeName: "first",
      loading: false,
      detail: {}, //详情
      demandOrderItemList: [], //物料信息
      exceptionRecord: [], //异常信息
      formOption: {
        labelWidth: 180,
        submitBtn: false,
        emptyBtn: false,
        column: [
          {
            label: "货运订单",
            prop: "orderNo",
            disabled: true,
          },
          {
            label: "货运订单类型",
            prop: "orderType",
            disabled: true,
          },
          {
            label: "交货单",
            prop: "deliverNo",
            disabled: true,
          },
          {
            label: "订单号",
            prop: "orderNumber",
            disabled: true,
          },
          {
            label: "提单号",
            prop: "billOfLadingNumber",
            disabled: true,
          },
          {
            label: "客户名称",
            prop: "customerName",
            disabled: true,
          },
          {
            label: "国际贸易条款",
            prop: "tradeTerms",
            disabled: true,
          },
          {
            label: "国际贸易条款附加信息",
            prop: "tradeTermsItem",
            disabled: true,
          },
          {
            label: "源位置",
            prop: "startLocationNo",
            disabled: true,
          },
          {
            label: "源位置名称",
            prop: "startLocationName",
            disabled: true,
          },
          {
            label: "源位置区域（省份）",
            prop: "startLocationArea",
            disabled: true,
          },
          {
            label: "源位置城市",
            prop: "startLocationCity",
            disabled: true,
          },
          {
            label: "源位置街道",
            prop: "startLocationStreet",
            disabled: true,
          },
          {
            label: "目标位置",
            prop: "targetLocationNo",
            disabled: true,
          },
          {
            label: "目标位置名称",
            prop: "targetLocationName",
            disabled: true,
          },
          {
            label: "目标位置区域（省份）",
            prop: "targetLocationArea",
            disabled: true,
          },
          {
            label: "目标位置城市",
            prop: "targetLocationCity",
            disabled: true,
          },
          {
            label: "目标位置街道",
            prop: "targetLocationStreet",
            disabled: true,
          },
          {
            label: "承运商ID",
            prop: "carrierNo",
            disabled: true,
          },
          {
            label: "承运商名称",
            prop: "carrierName",
            disabled: true,
          },
          {
            label: "计划提货日期",
            prop: "planGetGoodsDateStart",
            disabled: true,
          },
          {
            label: "备注",
            prop: "remark",
            disabled: true,
          },
          {
            label: "计划收货日期",
            prop: "planGetGoodsDateEnd",
            disabled: true,
          },
          {
            label: "运输方式",
            prop: "ysfs_des",
            disabled: true,
          },
          {
            label: "联系人",
            prop: "khlxr",
            disabled: true,
          },
          {
            label: "联系方式",
            prop: "khlxfs",
            disabled: true,
          },
          {
            label: "提货地址",
            prop: "thdz",
            disabled: true,
          },
          {
            label: "包装方式",
            prop: "bzfs",
            disabled: true,
          },
          {
            label: "包装数量",
            prop: "bzsl",
            disabled: true,
          },
          {
            label: "收发工厂描述",
            prop: "werksName",
            disabled: true,
          },
        ],
      },
      materialOption: {
        menu: false,
        addBtn: false,
        refreshBtn: false,
        columnBtn: false,
        column: [
          {
            label: "行项目号",
            prop: "itemNo",
          },
          {
            label: "物料",
            prop: "matCode",
          },
          {
            label: "物料描述",
            prop: "matDesc",
          },
          {
            label: "原交货数量",
            prop: "originNum",
          },
          {
            label: "交货数量",
            prop: "num",
          },
          {
            label: "交货数量单位",
            prop: "unit",
          },
        ],
      },
      exceptionOption: {
        addBtn: false,
        editBtn: false,
        delBtn: false,
        refreshBtn: false,
        columnBtn: false,
        column: [
          {
            label: "需求单号",
            prop: "parentId",
          },
          {
            label: "异常类型",
            prop: "exceptionType",
          },
          {
            label: "异常原因",
            prop: "exceptionTypeDesc",
          },
          {
            label: "异常时间",
            prop: "exceptionDate",
          },
          {
            label: "异常图片",
            prop: "exceptionPic",
          },
          {
            label: "上传人",
            prop: "createUser",
          },
          {
            label: "备注",
            prop: "remark",
          },
        ],
      },
      id: "",
      orderType: "",
    };
  },
  components: { abnormalCostList },
  computed: {},
  methods: {
    open(id, orderType) {
      this.id = id;
      this.orderType = orderType;
      this.dialogVisible = true;
      this.loading = true;
      getDetail({ id: id }).then((res) => {
        this.loading = false;
        if (res.data.code === 200 && res.data.success) {
          const data = res.data.data;
          this.detail = data.demandOrder;
          this.demandOrderItemList = data.demandOrderItemList;
          this.exceptionRecord = data.exceptionRecord;
        }
      });
    },
    dialogClose() {
      this.activeName = "first";
    },
    //异常费用
    abnormalCost(row) {
      this.$refs.abnormalCostList.open(
        row.id,
        row.alreadyExceptionBill,
        this.orderType
      );
    },
  },
};
</script>

<style></style>
